<template>
	<div class="gen-box">
		<div class="header"><TopBar :topTabTitle="'订单：' + orderNumber"></TopBar></div>
		<div class="content-box">
			<!-- 支付状态 -->
			<div class="payment">
				<h6>未支付</h6>
				<p>订单号：{{ orderNumber }}</p>
				<p>下单时间：{{ orderTime }}</p>
			</div>
			<!-- <div class="exc"></div> -->
			<!-- 收货信息 -->
			<div class="address-box">
				<img src="http://hs.lxgsa.cn/wap/templates/default/images/order_detail/2_06.jpg" alt="" />
				<div class="address-info">
					<p>
						订花信息：
						<span>{{ addressInfo.name + ' ' + addressInfo.phone }}</span>
					</p>
					<p>
						收花时间：
						<span>不限</span>
					</p>
					<p>
						收花信息：
						<span>{{ addressInfo.recName + ' ' + addressInfo.recPhone }}</span>
					</p>
					<p>
						收花地址：
						<span>{{ addressInfo.detailed }}</span>
					</p>
					<p>
						贺卡留言：
						<span>无</span>
					</p>
				</div>
			</div>

			<!-- 商品 -->
			<ul class="goods-box">
				<li v-for="goods in goodsList" :key="goods.id">
					<img :src="goods.imgPath" alt="fff" />
					<div class="goods-info">
						<p>{{goods.name}}</p>
						<p>X{{goods.num}}</p>
					</div>
					<p class="price">￥279</p>
				</li>
				
			</ul>

			<!-- 价格 -->
			<div class="settlement-box">
				<p>
					商品总价：
					<span>￥{{goodsTotal}}</span>
				</p>
				<p>
					配送费：
					<span>￥{{discount}}</span>
				</p>
				<p>
					实付款：
					<span>￥{{orderTotal}}</span>
				</p>
			</div>

			<!-- 底部按钮 -->
			<div class="footer-box">
				<button @click="pay(0)">微信支付</button>
				<button @click="pay(1)">支付宝支付</button>
			</div>
		</div>
	</div>
</template>

<script>
import TopBar from '../components/topTab.vue';
export default {
	name: 'genOrder',
	data() {
		return {
			orderNumber: '',
			orderTime: '',
			discount: 0,
			addressInfo: {},
			goodsList: this.$store.state.cartList
		};
	},
	methods: {
		/* z支付 */
		pay(param) {
			let order = {
				orderNumber: this.orderNumber,
				orderTime: this.orderTime,
				goodsTotal: this.goodsTotal,
				discount: this.discount,
				orderTotal: this.orderTotal,
				goodsList: this.goodsList
			};

			let olOrder = localStorage.getItem('orderList') ? JSON.parse(localStorage.getItem('orderList'))  : [];
			localStorage.setItem('orderList', JSON.stringify([...olOrder,order]));

			switch (param) {
				case 0:
					// console.log('微信支付');
					this.$router.replace('/pay?pay=' + param);
					break;
				case 1:
					// console.log('支付宝支付');
					this.$router.replace('/pay?pay=' + param);
					break;
			}
			// this.$router.push("/")
		},

		/* 生成token */
		setOrderNumber() {
			let x = new Date();
			let nowTime = '' + x.getFullYear() + (x.getMonth() + 1) + x.getDate() + x.getHours() + x.getMinutes() + x.getSeconds();
			let maths = [];
			for (var i = 0; i < 5; i++) {
				maths.push(Math.floor(Math.random() * 10));
			}
			let str = maths.join('');
			return nowTime + str;
		},
		/* 生成日期 */
		setOrderTime() {
			let x = new Date();
			let nowTime = '' + x.getFullYear() + '-' + (x.getMonth() + 1) + '-' + x.getDate() + ' ' + x.getHours() + ':' + x.getMinutes();
			return nowTime;
		}
	},

	created() {
		this.orderNumber = this.setOrderNumber();
		this.orderTime = this.setOrderTime();
		this.addressInfo = JSON.parse(localStorage.getItem('addressInfo'));
	},
	mounted() {},
	computed:{
		goodsTotal(){
			return this.goodsList.reduce((temp, item) => {
				return temp + item.price * item.num;
			}, 0);
		},
		orderTotal(){
			return (this.goodsTotal + this.discount)
		}
	},
	components: {
		TopBar
	}
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.gen-box {
	width: 100%;
}
.header {
	width: 100%;
	padding: 0 0.05rem;
	border-bottom: #ddd solid 0.01rem;
	position: fixed;
	top: 0;
	z-index: 3;
}
/* 内容 */
.content-box {
	position: absolute;
	top: 0.92rem;
	width: 100%;
	background-color: white;
	background-color: #eeeeee;
	padding-bottom: 1rem;
}

/* 支付状态 */
.payment {
	width: 100%;
	height: 2.18rem;
	display: flex;
	flex-direction: column;
	padding: 0.2rem;
	background-color: white;
}
.payment h6 {
	color: #f42424;
	font-size: 0.3rem;
	padding-bottom: 0.3rem;
}

.payment p {
	color: #747474;
	padding: 0.1rem 0;
}

/* 地址信息 */
.address-box {
	margin-top: 0.2rem;
	background-color: white;
	width: 100%;
	height: 2.86rem;
	display: flex;
	justify-content: flex-start;
	padding: 0.2rem;
}
.address-box img {
	width: 0.5rem;
	height: 0.5rem;
}
.address-info {
	padding-left: 0.2rem;
}
.address-info p {
	height: 0.5rem;
	color: #666666;
	/* line-height: 0.5rem; */
}
.address-info p span {
	color: #a6a6a6;
}

/* 商品 */
.goods-box {
	margin-top: 0.2rem;
	width: 100%;
	padding: 0.2rem;
	background-color: white;
}
.goods-box li {
	width: 100%;
	display: flex;
	border-bottom: #ddd solid 0.01rem;
	padding: 0.2rem 0;
	justify-content: space-between;
}
.goods-box img {
	width: 1.41rem;
	height: 1.41rem;
}
.goods-info {
	width: 60%;
}
.goods-info p {
	color: #666666;
	height: 0.6rem;
	font-size: 0.3rem;
}
.price {
	color: #f42424;
	font-size: 0.3rem;
}

/* 结算 */
.settlement-box {
	width: 100%;
	background-color: white;
	padding: 0.2rem;
}
.settlement-box p {
	height: 0.7rem;
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-size: 0.28rem;
	color: #666666;
}
.settlement-box p:last-child span {
	color: #f42424;
}

/* 底部 */
.footer-box {
	position: fixed;
	bottom: 0;
	z-index: 3;
	width: 100%;
	height: 1.08rem;
	background-color: #f42424;
	display: flex;
}
.footer-box button {
	width: 50%;
	height: 100%;
	border: none;
	color: white;
	font-size: 0.3rem;
	background: none;
}
.footer-box button:first-child {
	border-right: white solid 0.01rem;
}
</style>
